<template>
  <div class="login-cloumn">
    <title-header :title="title"></title-header>
    <div class="card-block">
      <img slot="header" src="../../../static/img/favicon.png" class="about-icon">
      <div class="login-input">
        <div class="input-block">
          <x-input is-type="china-mobile" ref="input01" required placeholder="手机" v-model="mobileNum">
            <span slot="label" class="iconfont icon-shouji01 icon-login"></span>
          </x-input>
          <x-input placeholder="密码" ref="input02" required type="password" v-model="passwords">
            <span slot="label" class="iconfont icon-dengluyemianmima icon-login"></span>
          </x-input>
          <x-input placeholder="确认密码" ref="input03" required type="password" v-model="passwords1">
            <span slot="label" class="iconfont icon-dengluyemianmima icon-login"></span>
          </x-input>
          <x-input placeholder="验证码" class="weui-vcode" ref="input04" required v-model="verify">
            <span slot="label" class="iconfont icon-message_light icon-login"></span>
            <div class="right-text" slot="right" @click="startCount" v-show="buttonShow">发送验证码</div>
            <div class="right-text" slot="right" v-show="countShow">&nbsp; 请等待
              <countdown v-model="time" @on-finish="finish1" :start="start"></countdown>秒</div>
          </x-input>
        </div>
        <div class="btn-block">
          <x-button type="warn" @click.native="submits">提交</x-button>
        </div>
      </div>
      <div v-transfer-dom>
        <x-dialog v-model="showCheckInfo" class="dialog-demo">
          <div style="padding: 15px;color: #333;">
            请填写正确格式信息
          </div>
          <div @click="showCheckInfo=false" class="closeDialog">
            <span>关闭</span>
          </div>
        </x-dialog>
        <x-dialog v-model="showCheckPasswords" class="dialog-demo">
          <div style="padding: 15px;color: #333;">
            两次密码不一致，请重新输入
          </div>
          <div @click="showCheckPasswords=false" class="closeDialog">
            <span>关闭</span>
          </div>
        </x-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Card,
  XInput,
  XButton,
  Group,
  Countdown,
  Cell,
  XSwitch,
  XDialog,
  TransferDomDirective as TransferDom
} from 'vux'
import TitleHeader from '@/components/titleHeader.vue'

export default {
  directives: {
    TransferDom
  },
  components: {
    Card,
    XInput,
    XButton,
    Group,
    TitleHeader,
    Countdown,
    Cell,
    XSwitch,
    XDialog
  },
  data () {
    return {
      mobileNum: '',
      passwords: '',
      passwords1: '',
      title: '用户注册',
      time: 60,
      start: false,
      buttonShow: true,
      countShow: false,
      showCheckInfo: false,
      showCheckPasswords: false,
      valid1: false,
      valid2: false,
      valid3: false,
      valid4: false,
      verify: ''
    }
  },
  mounted () {
    this.title = this.$route.query.title
  },
  methods: {
    startCount () {
      this.valid1 = this.$refs.input01.valid
      if (
        this.$refs.input01.valid === false ||
        this.mobileNum === '' ||
        this.passwords === '' ||
        this.passwords1 === ''
      ) {
        if (this.passwords !== this.passwords1) {
          this.showCheckPasswords = true
        } else {
          this.showCheckInfo = true
        }
      } else {
        this.start = true
        this.time = 60
        this.buttonShow = !this.buttonShow
        this.countShow = !this.countShow
      }
    },
    finish1 () {
      this.start = false
      this.time = 60
      this.buttonShow = !this.buttonShow
      this.countShow = !this.countShow
    },
    submits () {
      this.valid1 = this.$refs.input01.valid
      this.valid2 = this.$refs.input02.valid
      this.valid3 = this.$refs.input03.valid
      this.valid4 = this.$refs.input03.valid
      if (
        this.$refs.input01.valid === false ||
        this.$refs.input02.valid === false ||
        this.$refs.input03.valid === false ||
        this.$refs.input04.valid === false ||
        (this.passwords1 === '' ||
          this.mobileNum === '' ||
          this.passwords === '' ||
          this.verify === '')
      ) {
        if (this.passwords !== this.passwords1) {
          this.showCheckPasswords = true
        } else {
          this.showCheckInfo = true
        }
      } else {
        this.$router.push({
          name: 'loginpage'
        })
      }
    }
  }
}
</script>
<style scoped>
.about-icon {
  width: 66px;
  display: block;
  margin: auto;
}
.card-block {
  padding-top: 10px;
}
.login-input {
  width: 85%;
  margin: auto;
  font-size: 1rem;
}
.icon-login {
  padding-right: 15px;
  padding-bottom: 10px;
  font-size: 1.5rem;
  color: #cacaca;
}
.input-block {
  font-size: 1rem !important;
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.input-block div {
  padding: 6px 14px;
}
.b-t-text {
  color: #9a9696;
  font-size: 0.8rem;
  text-align: right;
  margin-top: 10px;
}
.btn-color {
  border-color: #e64340;
  color: #e64340;
}
.btn-block button {
  font-size: 1rem;
  margin-top: 10px;
}
.right-text {
  font-size: 0.8rem;
  border-left: 1px solid #d9d9d9;
  display: -webkit-inline-box;
}
.closeDialog {
  margin-bottom: 10px;
  color: #9e9e9e;
}
</style>
